<!DOCTYPE html>
<!--
__          _
\ \   _ __ | |__
 \ \ | '_ \| '_ \
 / / | | | | |_) |
/_/  |_| |_|_.__/
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>nb • cli plain-text note-taking, bookmarking, and archiving.</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=block" rel="stylesheet">

    <style>
      html {
        height: 100%;
        min-width: 0;
      }

      body {
        background-color: #fff;
        color: #fff;
        font-family: 'Courier Prime', 'monospace', sans-serif;
        height: auto;
        min-height: 100%;
        padding: 2rem;
      }

      a,
      a:hover {
        color: #fff;
        text-decoration: none;
      }

      .content {
        -webkit-animation:  color-animation 30s ease infinite;
        -moz-animation:     color-animation 30s ease infinite;
        -o-animation:       color-animation 30s ease infinite;
        animation:          color-animation 30s ease infinite;
        background: linear-gradient(135deg,
          #0E889C,
          #0ACC99
        );
        background-size: 3000% 3000%;
        min-height: 100%;
        padding: 0;
        text-align: center;
        width: 100%;
      }

      @-webkit-keyframes color-animation {
        0%    { background-position: 0%   0%;   }
        50%   { background-position: 100% 100%; }
        100%  { background-position: 0%   0%;   }
      }
      @-moz-keyframes color-animation {
        0%    { background-position: 0%   0%;   }
        50%   { background-position: 100% 100%; }
        100%  { background-position: 0%   0%;   }
      }
      @-o-keyframes color-animation {
        0%    { background-position: 0%   0%;   }
        50%   { background-position: 100% 100%; }
        100%  { background-position: 0%   0%;   }
      }
      @keyframes color-animation {
        0%    { background-position: 0%   0%;   }
        50%   { background-position: 100% 100%; }
        100%  { background-position: 0%   0%;   }
      }


      .command-name {
        display: inline-block;
        font-size: 12rem;
        line-height: 0.9em;
        margin: 0;
        padding: 0.3em 0 0;
        word-break: break-all;
      }

      @media only screen and (min-width: 550px) {
        .command-name {
          font-size: 18rem;
        }
      }

      @media only screen and (min-width: 768px) {
        .command-name {
          font-size: 23rem;
        }
      }

      .description {
        font-size: 1rem;
        margin: 1rem 0;
        padding: 0 2em;
        text-align: left;
      }

      @media only screen and (min-width: 768px) {
        .description {
          font-size: 1.25rem;
        }
      }

      .links {
        list-style-type: none;
        margin-bottom: 0;
        padding-bottom: 5rem;
        padding-top: 2rem;
      }

      @media only screen and (min-width: 550px) {
        .links {
          padding: 4rem;
        }
      }

      .links li {
        font-size: 6rem;
        padding: 0 0.25em;
      }

      ::selection {
        background: #fff;
        color: #fff;
      }

      ::-moz-selection {
        background: #fff;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="container">
        <div class="row">
          <div class="col">
            <a href="https://github.com/xwmx/nb">
              <h1 class="command-name">
                nb
              </h1>
            </a>
          </div> <!-- .col -->
        </div> <!-- .row -->

        <div class="row">
          <div class="col-lg-8 offset-lg-2">
            <p class="description">
              Command line note-taking, bookmarking, and archiving with
              plain-text data storage,
              encryption,
              filtering and search,
              Git-backed versioning and syncing,
              Pandoc-backed conversion,
              global and local notebooks,
              customizable color themes,
              and more, all in a single portable, user-friendly script.
            </p>
          </div> <!-- .col-* -->
        </div> <!-- .row -->

        <div class="row">
          <div class="col">
            <ul class="links list-inline">
              <li class="list-inline-item">
                <a href="https://github.com/xwmx/nb" arial-label="github">
                  <i aria-hidden class="fab fa-github"></i>
                </a>
              </li>
            </ul>
          </div> <!-- .col    -->
        </div> <!-- .row      -->
      </div> <!-- .container  -->
    </div> <!-- .content      -->
  </body>
</html>

